import React, {useState,useEffect,useRef} from 'react'
import QuestionList from './QuestionList'
import QuestionForm from './QuestionForm'
import { PageHeader,Modal,notification,Button} from 'antd'
import axios from 'axios'
import {
    PlusSquareOutlined,
} from '@ant-design/icons'

const Question = () => {

    const [isAddvisible, setIsAddvisible] = useState(false)
    const addForm = useRef(null)
  
    //存对象信息
    const [formInfo, setFormInfo] = useState({})
  
    useEffect(()=>{
      axios.get("/api/question").then(res=>{
        console.log(res.data)
        setFormInfo(res)
      })
    },[]) 
  
    const addFormOK=()=>{
      addForm.current.validateFields().then(value=>{
        console.log(value)
        setIsAddvisible(false)
        //从post到后端生成ID，方便删除和更新，自增长id
        axios.post('/api/question/creat_quetion',{
          ...value,
        }).then(res=>{
          console.log(res)
          console.log(value.true_answer)
          notification.info({
            message:'通知',
            description:
              '提交成功，请自行查看',
            placement:"bottomRight",
          });
        })
      }).catch(err=>{
        console.log(err)
      })
    }
    return (
        <div>
            <PageHeader
                className="问题题目"
                title="问题"
                subTitle="Question"
            />
            <Button type="primary" 
                icon={<PlusSquareOutlined />}
                onClick={()=>{setIsAddvisible(true)}}
                style={{opacity: 0.6,backgroundColor:"Highlight"}}
            >添加题目</Button>
            <Modal
                visible={isAddvisible}
                title="添加题目"
                okText="确定"
                cancelText="取消"
                onCancel={()=>{
                setIsAddvisible(false)
            }}
                onOk={() => addFormOK() }
            >
                <QuestionForm ref={addForm}/>
            </Modal>
            <div style={{overflow:"auto", marginTop:"10px"}}>
                <QuestionList />
            </div>
        </div>
    )
}

export default Question
